<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在准备你的生日惊喜...</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: #000;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        /* 加载动画 */
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            z-index: 2;
        }

        .loading-text {
            font-size: 24px;
            margin-bottom: 20px;
            opacity: 0;
            animation: fadeInOut 2s infinite;
        }

        /* 星星背景 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .star {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            animation: twinkle var(--duration) infinite;
            opacity: 0;
        }

        /* 心形动画 */
        .heart-container {
            position: absolute;
            width: 100%;
            height: 100%;
            animation: heartBeat 1s infinite;
            opacity: 0;
        }

        .heart {
            position: absolute;
            width: 30px;
            height: 30px;
            background: #ff69b4;
            transform: rotate(45deg) scale(0);
            animation: heartPop 2s infinite;
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            background: #ff69b4;
            border-radius: 50%;
        }

        .heart::before {
            left: -15px;
        }

        .heart::after {
            top: -15px;
        }

        /* 彩带效果 */
        .ribbon {
            position: absolute;
            width: 2px;
            transform-origin: 50% 0;
            animation: ribbonFall var(--duration) ease-in infinite;
            opacity: 0;
        }

        /* 动画关键帧 */
        @keyframes fadeInOut {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0; transform: scale(0.3); }
            50% { opacity: 0.8; transform: scale(1); }
        }

        @keyframes heartPop {
            0% { transform: rotate(45deg) scale(0); opacity: 0; }
            50% { transform: rotate(45deg) scale(1); opacity: 1; }
            100% { transform: rotate(45deg) scale(0); opacity: 0; }
        }

        @keyframes ribbonFall {
            0% { transform: translateY(-100%) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
        }

        /* 进度条 */
        .progress-container {
            position: absolute;
            bottom: 20%;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
            overflow: hidden;
        }

        .progress-bar {
            width: 0%;
            height: 100%;
            background: #ff69b4;
            transition: width 0.5s ease;
        }

        /* 文字提示 */
        .message {
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 16px;
            text-align: center;
            opacity: 0;
        }

        .message.active {
            animation: fadeInOut 2s forwards;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="stars" id="stars"></div>
        <div class="loading">
            <div class="loading-text">正在收集美好的回忆...</div>
        </div>
        <div class="progress-container">
            <div class="progress-bar" id="progress"></div>
        </div>
        <div class="message" id="message"></div>
    </div>

    <script>
        // 创建星星
        function createStars() {
            const stars = document.getElementById('stars');
            const count = 100;

            for (let i = 0; i < count; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // 随机位置
                star.style.left = Math.random() * 100 + 'vw';
                star.style.top = Math.random() * 100 + 'vh';
                
                // 随机大小
                const size = Math.random() * 3 + 1;
                star.style.width = size + 'px';
                star.style.height = size + 'px';
                
                // 随机动画延迟和持续时间
                star.style.setProperty('--duration', (Math.random() * 2 + 1) + 's');
                star.style.animationDelay = Math.random() * 2 + 's';
                
                stars.appendChild(star);
            }
        }

        // 创建彩带
        function createRibbons() {
            const container = document.querySelector('.container');
            const count = 20;

            for (let i = 0; i < count; i++) {
                const ribbon = document.createElement('div');
                ribbon.className = 'ribbon';
                
                // 随机位置和颜色
                ribbon.style.left = Math.random() * 100 + 'vw';
                const hue = Math.random() * 360;
                ribbon.style.background = `hsl(${hue}, 100%, 70%)`;
                
                // 随机高度和动画时间
                ribbon.style.height = (Math.random() * 50 + 20) + 'px';
                ribbon.style.setProperty('--duration', (Math.random() * 2 + 2) + 's');
                ribbon.style.animationDelay = Math.random() * 2 + 's';
                
                container.appendChild(ribbon);
            }
        }

        // 创建心形
        function createHearts() {
            const container = document.querySelector('.container');
            const count = 10;

            for (let i = 0; i < count; i++) {
                const heartContainer = document.createElement('div');
                heartContainer.className = 'heart-container';
                
                const heart = document.createElement('div');
                heart.className = 'heart';
                
                // 随机位置
                heartContainer.style.left = Math.random() * 100 + 'vw';
                heartContainer.style.top = Math.random() * 100 + 'vh';
                
                // 随机动画延迟
                heart.style.animationDelay = Math.random() * 2 + 's';
                
                heartContainer.appendChild(heart);
                container.appendChild(heartContainer);
            }
        }

        // 更新进度条和消息
        const messages = [
            "正在收集美好的回忆...",
            "正在包装温暖的祝福...",
            "正在撒上一些小惊喜...",
            "马上就要准备好啦...",
            "最后一点点..."
        ];

        let currentMessage = 0;
        const messageElement = document.getElementById('message');
        const progressBar = document.getElementById('progress');

        function updateProgress() {
            let progress = 0;
            const interval = setInterval(() => {
                progress += 1;
                progressBar.style.width = progress + '%';

                // 更新消息
                if (progress % 20 === 0 && currentMessage < messages.length) {
                    messageElement.textContent = messages[currentMessage];
                    messageElement.classList.remove('active');
                    void messageElement.offsetWidth; // 触发重绘
                    messageElement.classList.add('active');
                    currentMessage++;
                }

                if (progress >= 100) {
                    clearInterval(interval);
                    setTimeout(() => {
                        window.location.href = 'birthday_style_01.html';
                    }, 1000);
                }
            }, 50);
        }

        // 初始化
        window.addEventListener('load', () => {
            createStars();
            createRibbons();
            createHearts();
            updateProgress();
        });
    </script>
</body>
</html>
